<template>
    <div class="components_edit_modal">
        <el-dialog title="导入培养方案" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="form"   :rules="rules" ref="form">
                <el-form-item label="学校："  prop="schoolId">
                    <el-select v-model="form.schoolId" placeholder="请选择" @change="changeSchool">
                        <el-option
                            v-for="item in schoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院：" prop="secondSchoolId">
                    <el-select v-model="form.secondSchoolId" placeholder="请选择" @change="changeSecondSchool">
                        <el-option
                            v-for="item in secondSchoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业：" prop="professionId">
                    <el-select v-model="form.professionId" placeholder="请选择"  @change="changeProfession">
                        <el-option
                            v-for="item in professionList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年级：" prop="grade">
                    <el-select v-model="form.grade" placeholder="请选择">
                        <el-option
                            v-for="item in gradeList" :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="上传方案：" prop="uploadFile" class="capture">
                    <el-upload
                            ref="schemeUpload"
                            class="components_upload"
                            :action="upload.url"
                            :auto-upload="false"
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                            :limit="2"
                            :on-change="handleUploadChange"
                            :on-remove="handleRemove"
                            >
                            <el-button size="small" type="primary">选择文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传模版文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="下载模版：">
                    <a href="javascript: void(0);" class="link_txt" @click="downloadExcel">培养方案.xlsx</a>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
                 state: false,
                 rules: {
                    schoolId: [
                        { required: true, message: '请选择院校', trigger: 'change', type: 'number' }
                    ],
                    secondSchoolId: [
                         { required: true, message: '请选择院系', trigger: 'change', type: 'number' }
                    ],
                    professionId: [
                        { required: true, message: '请选择所属专业', trigger: 'change', type: 'number'},
                    ],
                    grade: [
                        { required: true, message: '请选择年级', trigger: 'change', type: 'string'},
                    ],
                    uploadFile: [
                        { required: true, message: '请上传培养方案文件', trigger: 'blur', type: 'object'},
                    ]
                 },
                form: {
                    schoolId:null,
                    secondSchoolId:null,
                    professionId:null,
                    grade:null,
                    uploadFile:null
                },
                // 学校列表
                // schoolList:null,
                // 二级院校列表
                secondSchoolList:null,
                // 专业列表
                professionList:null,
                // 学期列表
                semesterList:null,
                // 年级列表
                gradeList:null,
                // 考核方式列表
                assessmenTypeList:null,
                // upload组件
                upload: {
                    url:api.trainScheme.importExcel,
                    fileList:[],
                },
            }
        },
        created() {
            // 获取学校数据
            // this.getSchoolList();
            // 获取学期列表
            //this.getSemesterListByDicts();
             // 获取年级 字典
            this.getGradeList();
        },
        mounted() {},
        computed:{
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        methods: {
            // 打开模态框
            showDialog({schoolId, secondSchoolId, professionId}){
                this.state = true;
                 
                this.$nextTick(function(){
                    // 重置表单
                    this.$refs['form'].resetFields();
                    // 重置上传文件
                    this.$refs.schemeUpload.uploadFiles = [];
                    // 回填院校树选中的数据
                    if(schoolId != null){
                        this.form.schoolId = schoolId;
                        this.getSecondSchoolList(schoolId);
                    }
                    if(secondSchoolId != null){
                        this.form.secondSchoolId = secondSchoolId;
                        this.getProfessionList(this.form.schoolId, secondSchoolId);
                    }
                    if(professionId != null){
                        this.form.professionId = professionId;
                        // this.getGradeList(professionId);
                    }
                })
            },
            // 获取学校数据
            getSchoolList() {
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
             // 获取二级院系数据
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询年级 (来自班级表数据)
            getGradeList(professionId){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: 'grade',
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.gradeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 保存
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if (valid) {
                         // 设置数据
                        vm.form.schoolName = _.find(vm.schoolList, {id: vm.form.schoolId}).text;
                        vm.form.secondSchoolName = _.find(vm.secondSchoolList, {id: vm.form.secondSchoolId}).text;
                        vm.form.professionName =  _.find(vm.professionList, {id: vm.form.professionId}).text;
                        // 设置上传请求头
                        let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                        // 封装form数据
                        let param = new FormData()  // 创建form对象
                        for(let data in vm.form){
                            param.append(data, vm.form[data]);
                        }
                        // 异步请求
                        vm.axios.post(api.trainScheme.importExcel, param, config)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                // 关闭弹出窗口
                                vm.state = false;
                                // 刷新table
                                vm.$parent.$refs.trainSchemeTable.$emit('vuetable:refresh');
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });

            },
            changeSchool(schoolId){
                this.form.secondSchoolId = null;
                this.form.professionId = null;
                // this.form.grade = null;
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId){
                this.form.professionId = null;
                // this.form.grade = null;
                this.getProfessionList(this.form.schoolId, secondSchoolId);
            },
            changeProfession(professionId){
                // this.form.grade = null;
                // this.getGradeList(professionId);
            },
            // 下载
            downloadExcel(){
                let href = config.BASE_URL + api.trainScheme.downloadExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                window.location.href = href;
            },
            // 上传change事件
            handleUploadChange(file, fileList){
                // 校验文件名 过滤文件
                if(file.name.indexOf(".xlsx") == -1){
                    this.$message.error("只能上传培养方案模版Excel文件");
                    fileList.splice(0,fileList.length);
                    return;
                }
                // 设置数据
                this.form.uploadFile = file.raw;
                fileList.splice(0,fileList.length);
                fileList.push(file);
                this.$refs['form'].validateField("uploadFile");
                // console.log(this.$refs.schemeUpload)
            },
            // 移除文件
            handleRemove(file, fileList) {
                this.form.uploadFile = null;
            },
        },
        components: {}
    };
</script>
<style scoped>

</style>